$(function () {
    getData();
    getDayData();
    getCategoryData();
    getBarData();
    // initLine()
    // initPie()
    // initBar()
})

// 获取文章统计数据
function getData() {
    $.ajax({
        url: "/admin/data/info",
        method: "get",
        success(res) {
            console.log(11, res);
            $(".scolor00").find("em").text(res.totalArticle);
            $(".scolor01").find("em").text(res.dayArticle);
            $(".scolor02").find("em").text(res.totalComment);
            $(".scolor03").find("em").text(res.dayComment);
        }
    })
}

// 初始化曲线图
function initLine(data) {
    // chartDom：表示渲染曲线图的容器
    // curve_show：表示容器id
    // map
    var chartDom = document.getElementById('curve_show');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: { // 弹窗的形式显示x轴y轴数据
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data: data.map(item => item.date)// x轴的数据
        },
        yAxis: {
            type: 'value'
        },
        title: [ // 图表标题
            {
                left: 'center',
                text: '文章日新增趋势'
            }
        ],
        series: [
            {
                //   data: [820, 932, 901, 934, 1290, 1330, 1320],
                data: data.map(item => item.count),
                type: 'line',
                smooth: true,
                areaStyle: { // 面积渐变色
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'red'
                        },
                        {
                            offset: 1,
                            color: 'white'
                        }
                    ])
                },
                label: { // 顶部文章数据展示
                    show: true,
                    position: 'top',
                    color: "black"
                },
            }
        ]
    };

    option && myChart.setOption(option);
}

// 获取日新增文章统计数量（曲线图数据）
function getDayData() {
    $.ajax({
        url: "/admin/data/article",
        method: "get",
        success(res) {
            // console.log(72,res);
            initLine(res.date);
        }
    })
}

// 初始化饼状图
function initPie(data) {
    var chartDom = document.getElementById('pie_show');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                // 注意：labelLine和label不能同时存在
                labelLine:{
                    show: true,
                    showAbove: true
                },
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                data: data.map(item=>{
                    return {
                        name: item.name,
                        value: item.articles // 注意：value属性名不能改，这是echarts规定的
                    }
                })
            }
        ]
    };
    option && myChart.setOption(option);
}

// 获取类别数据（饼状图数据）
function getCategoryData() { 
    $.ajax({
        url: "/admin/data/category",
        method: "get",
        success(res){
            console.log(149,res);
            initPie(res.date);
        }
    })
 }

//  初始化柱状图
 function initBar(data){
    var chartDom = document.getElementById('column_show');
    var myChart = echarts.init(chartDom);
    var option;
    
    option = {
      xAxis: {
        type: 'category',
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        data: Object.keys(data) // Object.keys：获取对象中的所有键名并以数组的形式返回
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
        //   data: [120, 200, 150, 80, 70, 110, 130],
          data: Object.values(data),// Object.values：获取对象中的所有键值并以数组的形式返回
          type: 'bar',
          color: "#55ff00",
          barWidth: "30%"
        }
      ]
    };
    
    option && myChart.setOption(option);
 }

//  获取日文章访问量数据（柱状图数据）
function getBarData(){
    $.ajax({
        url: "/admin/data/visit",
        method: "get",
        success(res){
            console.log(189,res);
            initBar(res.data)
        }
    })
}